<section id="widget-grid" class="">
	<div class="row">
		<article class="col-sm-12 toggle-demotest">
			<div class="jarviswidget " id="wid-id-0"
				data-widget-togglebutton="false" data-widget-editbutton="false"
				data-widget-fullscreenbutton="false" data-widget-colorbutton="false"
				data-widget-deletebutton="false">
				<header>
					<span class="widget-icon"><i
						class="glyphicon glyphicon-stats txt-color-darken"></i></span>
					<h2>任务队列</h2>
					<ul id="myTab" class="nav nav-tabs pull-right in">
						<li class="active">
							<a href="##s1" data-toggle="tab"> <i class="fa fa-clock-o"></i> 
								<span	class="hidden-mobile hidden-tablet">任务队列</span>
							</a>
						</li>
					</ul>

				</header>
				<div class="no-padding">
					<div class="jarviswidget-editbox">test</div>
					<div class="widget-body ">
						<div id="myTabContent" class="tab-content $tabContentClass">
							<div class="tab-pane fade active in padding-10 no-padding-bottom"
								id="s1">
								<div class="row no-space">
									<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
										<span class="demo-liveupdate-1"> <span
											class="onoffswitch-title">在线开关</span> <span
											class="onoffswitch"> <input type="checkbox"
												name="start_interval" class="onoffswitch-checkbox"
												id="start_interval"> <label
												class="onoffswitch-label" for="start_interval"> <span
													class="onoffswitch-inner" data-swchon-text="ON"
													data-swchoff-text="OFF"></span> <span
													class="onoffswitch-switch"></span>
											</label>
										</span>
										</span>
										<div id="updating-chart" class="chart-large txt-color-blue"></div>

									</div>

									<div class="show-stats" style="display:none;">
										<div class="row">
											<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
												<span class="text"> 任务总数 <span class="pull-right" id="queueSize"></span>
												</span>
												<div class="progress">
													<div class="progress-bar bg-color-blueDark"
														style="width: 65%;"></div>

												</div>
											</div>
											<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
												<span class="text"> 数据传输 <span class="pull-right">440
														GB</span>
												</span>
												<div class="progress">
													<div class="progress-bar bg-color-blue" style="width: 34%;"></div>

												</div>
											</div>
											<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
												<span class="text"> BUG修复 <span class="pull-right">77%</span>
												</span>
												<div class="progress">
													<div class="progress-bar bg-color-blue" style="width: 77%;"></div>

												</div>
											</div>
											<div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
												<span class="text"> 用户测试 <span class="pull-right">7
														Days</span>
												</span>
												<div class="progress">
													<div class="progress-bar bg-color-greenLight"
														style="width: 84%;"></div>

												</div>
											</div>
											<span class="show-stat-buttons"> <span
												class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <a
													href="javascript:void(0);"
													class="btn btn-default btn-block hidden-xs">生成PDF</a>
											</span> <span class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> <a
													href="javascript:void(0);"
													class="btn btn-default btn-block hidden-xs">报告问题</a>
											</span>
											</span>
										</div>

									</div>
								</div>

								<div class="show-stat-microcharts">
									<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
										<div class="easy-pie-chart txt-color-orangeDark"
											data-percent="33" data-pie-size="50">
											<span class="percent percent-sign">35</span>
										</div>
										<span class="easy-pie-title">  <i
											class="fa fa-caret-up icon-color-bad"></i>
										</span>
										<ul class="smaller-stat hidden-sm pull-right">
											<li><span class="label bg-color-greenLight"><i
													class="fa fa-caret-up"></i> 97%</span></li>
											<li><span class="label bg-color-blueLight"><i
													class="fa fa-caret-down"></i> 44%</span></li>
										</ul>
										<div
											class="sparkline txt-color-greenLight hidden-sm hidden-md pull-right"
											data-sparkline-type="line" data-sparkline-height="33px"
											data-sparkline-width="70px" data-fill-color="transparent">
											130, 187, 250, 257, 200, 210, 300, 270, 363, 247, 270, 363,
											247</div>

									</div>

									<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
										<div class="easy-pie-chart txt-color-greenLight"
											data-percent="78.9" data-pie-size="50">
											<span class="percent percent-sign">78.9 </span>
										</div>
										<span class="easy-pie-title">  <i
											class="fa fa-caret-down icon-color-good"></i>
										</span>
										<ul class="smaller-stat hidden-sm pull-right">
											<li><span class="label bg-color-blueDark"><i
													class="fa fa-caret-up"></i> 76%</span></li>
											<li><span class="label bg-color-blue"><i
													class="fa fa-caret-down"></i> 3%</span></li>
										</ul>
										<div
											class="sparkline txt-color-blue hidden-sm hidden-md pull-right"
											data-sparkline-type="line" data-sparkline-height="33px"
											data-sparkline-width="70px" data-fill-color="transparent">
											257, 200, 210, 300, 270, 363, 130, 187, 250, 247, 270, 363,
											247</div>

									</div>

									<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
										<div class="easy-pie-chart txt-color-blue" data-percent="23"
											data-pie-size="50">
											<span class="percent percent-sign">23 </span>
										</div>
										<span class="easy-pie-title"> <i
											class="fa fa-caret-up icon-color-good"></i>
										</span>
										<ul class="smaller-stat hidden-sm pull-right">
											<li><span class="label bg-color-darken">10GB</span></li>
											<li><span class="label bg-color-blueDark"><i
													class="fa fa-caret-up"></i> 10%</span></li>
										</ul>
										<div
											class="sparkline txt-color-darken hidden-sm hidden-md pull-right"
											data-sparkline-type="line" data-sparkline-height="33px"
											data-sparkline-width="70px" data-fill-color="transparent">
											200, 210, 363, 247, 300, 270, 130, 187, 250, 257, 363, 247,
											270</div>

									</div>

									<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3">
										<div class="easy-pie-chart txt-color-darken" data-percent="36"
											data-pie-size="50">
											<span class="percent degree-sign">36 <i
												class="fa fa-caret-up"></i>
											</span>
										</div>
										<span class="easy-pie-title">  <i
											class="fa fa-caret-down icon-color-good"></i>
										</span>
										<ul class="smaller-stat hidden-sm pull-right">
											<li><span class="label bg-color-red"><i
													class="fa fa-caret-up"></i> 124</span></li>
											<li><span class="label bg-color-blue"><i
													class="fa fa-caret-down"></i> 40 F</span></li>
										</ul>
										<div
											class="sparkline txt-color-red hidden-sm hidden-md pull-right"
											data-sparkline-type="line" data-sparkline-height="33px"
											data-sparkline-width="70px" data-fill-color="transparent">
											2700, 3631, 2471, 2700, 3631, 2471, 1300, 1877, 2500, 2577,
											2000, 2100, 3000</div>

									</div>
								</div>

							</div>

							<div class="tab-pane fade" id="s2">
								<div class="widget-body-toolbar bg-color-white" id="">
									<form class="form-inline" role="form">
										<div class="form-group">
											<label class="sr-only" for="s123">显示 从</label> <input
												type="email" class="form-control input-sm" id="s123"
												placeholder="显示 从">
										</div>
										<div class="form-group">
											<input type="email" class="form-control input-sm" id="s124"
												placeholder="到">
										</div>

										<div class="btn-group hidden-phone pull-right">
											<a class="btn dropdown-toggle btn-xs btn-default"
												data-toggle="dropdown"><i class="fa fa-cog"></i> 更多 <span
												class="caret"> </span> </a>
											<ul class="dropdown-menu pull-right">
												<li><a href="javascript:void(0);"> <i
														class="fa fa-file-text-alt"></i> 导出PDF
												</a></li>
												<li><a href="javascript:void(0);"> <i
														class="fa fa-question-sign"></i> 帮助
												</a></li>
											</ul>
										</div>
									</form>

								</div>
								<div class="padding-10">
									<div id="statsChart" class="chart-large has-legend-unique"></div>
								</div>

							</div>

							<div class="tab-pane fade" id="s3">
								<div class="widget-body-toolbar bg-color-white smart-form"
									id="rev-toggles">
									<div class="inline-group">
										<label for="gra-0" class="checkbox"> <input
											type="checkbox" name="gra-0" id="gra-0" checked="checked">
											<i></i> 目标值
										</label> <label for="gra-1" class="checkbox"> <input
											type="checkbox" name="gra-1" id="gra-1" checked="checked">
											<i></i> 实际值
										</label> <label for="gra-2" class="checkbox"> <input
											type="checkbox" name="gra-2" id="gra-2" checked="checked">
											<i></i> 注册数
										</label>
									</div>
									<div class="btn-group hidden-phone pull-right">
										<a class="btn dropdown-toggle btn-xs btn-default"
											data-toggle="dropdown"><i class="fa fa-cog"></i> 更多 <span
											class="caret"> </span> </a>
										<ul class="dropdown-menu pull-right">
											<li><a href="javascript:void(0);"> <i
													class="fa fa-file-text-alt"></i> 导出PDF
											</a></li>
											<li><a href="javascript:void(0);"> <i
													class="fa fa-question-sign"></i> 帮助
											</a></li>
										</ul>
									</div>

								</div>
								<div class="padding-10">
									<div id="flotcontainer" class="chart-large has-legend-unique"></div>
								</div>

							</div>

						</div>
						<!-- end tabContent -->

					</div>
					<!-- end widgetContent -->

				</div>
				<!-- end jarvisWidgetBody -->

			</div>
			<!-- end widget -->
			<!-- end jarvisWidget -->

		</article>
		<!-- end widgetGridCol -->

	</div>
	<!-- end widgetGridRow -->

	<div class="row" style="display:none;">
		<article class="col-sm-12 col-md-12 col-lg-6">
			
			<!-- end widget -->
			<!-- end jarvisWidget -->

			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-3"
				data-widget-colorbutton="false">
				<header>
					<span class="widget-icon"><i class="fa fa-calendar"></i></span>
					<h2>我的事件</h2>
					<div class="widget-toolbar ">
						<!-- add: non-hidden - to disable auto hide -->
						<div class="btn-group">
							<button class="btn dropdown-toggle btn-xs btn-default"
								data-toggle="dropdown">
								显示 <i class="fa fa-caret-down"></i>
							</button>
							<ul class="dropdown-menu js-status-update pull-right">
								<li><a href="javascript:void(0);" id="mt">星期一</a></li>
								<li><a href="javascript:void(0);" id="ag">日程</a></li>
								<li><a href="javascript:void(0);" id="td">今天</a></li>
							</ul>
						</div>

					</div>
					<!-- end jarvisWidgetToolbar -->

				</header>
				<div>
					<div class="jarviswidget-editbox">
						<input type="text" class="form-control">

					</div>
					<div class="widget-body no-padding" id="">
						<div class="widget-body-toolbar " id="">
							<div id="calendar-buttons">

								<div class="btn-group">
									<a href="javascript:void(0)" class="btn btn-default btn-xs"
										id="btn-prev"><i class="fa fa-chevron-left"></i> </a> <a
										href="javascript:void(0)" class="btn btn-default btn-xs"
										id="btn-next"><i class="fa fa-chevron-right"></i> </a>
								</div>
							</div>

						</div>
						<div id="calendar"></div>

					</div>
					<!-- end widgetContent -->

				</div>
				<!-- end jarvisWidgetBody -->

			</div>
			<!-- end widget -->
			<!-- end jarvisWidget -->

		</article>
		<!-- end widgetGridCol -->

		<article class="col-sm-12 col-md-12 col-lg-6">
			<div class="jarviswidget " id="wid-id-2"
				data-widget-editbutton="false" data-widget-colorbutton="false">
				<header>
					<span class="widget-icon"><i class="fa fa-map-marker"></i></span>
					<h2>访客地域分布</h2>
					<div class="widget-toolbar hidden-mobile">
						<span class="onoffswitch-title"><i
							class="fa fa-location-arrow"></i> 实时</span> <span class="onoffswitch">
							<input type="checkbox" name="onoffswitch"
							class="onoffswitch-checkbox" checked="checked" id="myonoffswitch">
							<label class="onoffswitch-label" for="myonoffswitch"> <span
								class="onoffswitch-inner" data-swchon-text="YES"
								data-swchoff-text="NO"></span> <span class="onoffswitch-switch"></span>
						</label>
						</span>

					</div>
					<!-- end jarvisWidgetToolbar -->

				</header>
				<div>
					<div class="jarviswidget-editbox">
						<div>
							<label>Title:</label> <input type="text" />
						</div>

					</div>
					<div class="widget-body no-padding" id="">
						<div id="vector-map" class="vector-map"></div>
						<div id="heat-fill">
							<span class="fill-a">0</span> <span class="fill-b">5,000</span>
						</div>

						<table class="table table-striped table-hover table-condensed">
							<thead>
								<tr>
									<th>国家</th>
									<th>访问数</th>
									<th class="text-align-center">用户活动情况</th>
									<th class="text-align-center">在线</th>
									<th class="text-align-center">性别比例</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><a href="javascript:void(0);">美国</a></td>
									<td>4,977</td>
									<td class="text-align-center">
										<div class="sparkline txt-color-blue text-align-center"
											data-sparkline-height="22px" data-sparkline-width="90px"
											data-sparkline-barwidth="2">2700, 3631, 2471, 1300,
											1877, 2500, 2577, 2700, 3631, 2471, 2000, 2100, 3000</div>
									</td>
									<td class="text-align-center">143</td>
									<td class="text-align-center">
										<div class="sparkline display-inline"
											data-sparkline-type='pie'
											data-sparkline-piecolor='["#E979BB", "#57889C"]'
											data-sparkline-offset="90" data-sparkline-piesize="23px">
											17,83</div>
										<div
											class="btn-group display-inline pull-right text-align-left hidden-tablet">
											<button class="btn btn-xs btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="fa fa-cog fa-lg"></i>
											</button>
											<ul class="dropdown-menu dropdown-menu-xs pull-right">
												<li><a href="javascript:void(0);"> <i
														class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i> <u>P</u>DF
												</a></li>
												<li><a href="javascript:void(0);"> <i
														class="fa fa-times fa-lg fa-fw txt-color-red"></i> <u>D</u>elete
												</a></li>
												<li class="divider"></li>

												<li class="text-align-center"><a
													href="javascript:void(0);">取消</a></li>
											</ul>
										</div>
									</td>
								</tr>
								<tr>
									<td><a href="javascript:void(0);">澳大利亚</a></td>
									<td>4,873</td>
									<td class="text-align-center">
										<div class="sparkline txt-color-blue text-align-center"
											data-sparkline-height="22px" data-sparkline-width="90px"
											data-sparkline-barwidth="2">1000, 1100, 3030, 1300,
											-1877, -2500, -2577, -2700, 3631, 2471, 4700, 1631, 2471</div>
									</td>
									<td class="text-align-center">247</td>
									<td class="text-align-center">
										<div class="sparkline display-inline"
											data-sparkline-type='pie'
											data-sparkline-piecolor='["#E979BB", "#57889C"]'
											data-sparkline-offset="90" data-sparkline-piesize="23px">
											22,88</div>
										<div
											class="btn-group display-inline pull-right text-align-left hidden-tablet">
											<button class="btn btn-xs btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="fa fa-cog fa-lg"></i>
											</button>
											<ul class="dropdown-menu dropdown-menu-xs pull-right">
												<li><a href="javascript:void(0);"> <i
														class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i> <u>P</u>DF
												</a></li>
												<li><a href="javascript:void(0);"> <i
														class="fa fa-times fa-lg fa-fw txt-color-red"></i> <u>D</u>elete
												</a></li>
												<li class="divider"></li>

												<li class="text-align-center"><a
													href="javascript:void(0);">取消</a></li>
											</ul>
										</div>
									</td>
								</tr>
								<tr>
									<td><a href="javascript:void(0);">印度</a></td>
									<td>3,671</td>
									<td class="text-align-center">
										<div class="sparkline txt-color-blue text-align-center"
											data-sparkline-height="22px" data-sparkline-width="90px"
											data-sparkline-barwidth="2">3631, 1471, 2400, 3631,
											471, 1300, 1177, 2500, 2577, 3000, 4100, 3000, 7700</div>
									</td>
									<td class="text-align-center">373</td>
									<td class="text-align-center">
										<div class="sparkline display-inline"
											data-sparkline-type='pie'
											data-sparkline-piecolor='["#E979BB", "#57889C"]'
											data-sparkline-offset="90" data-sparkline-piesize="23px">
											10,90</div>
										<div
											class="btn-group display-inline pull-right text-align-left hidden-tablet">
											<button class="btn btn-xs btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="fa fa-cog fa-lg"></i>
											</button>
											<ul class="dropdown-menu dropdown-menu-xs pull-right">
												<li><a href="javascript:void(0);"> <i
														class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i> <u>P</u>DF
												</a></li>
												<li><a href="javascript:void(0);"> <i
														class="fa fa-times fa-lg fa-fw txt-color-red"></i> <u>D</u>elete
												</a></li>
												<li class="divider"></li>

												<li class="text-align-center"><a
													href="javascript:void(0);" class="" id="">取消</a></li>
											</ul>
										</div>
									</td>
								</tr>
								<tr>
									<td><a href="javascript:void(0);">巴西</a></td>
									<td>2,476</td>
									<td class="text-align-center">
										<div class="sparkline txt-color-blue text-align-center"
											data-sparkline-height="22px" data-sparkline-width="90px"
											data-sparkline-barwidth="2">2700, 1877, 2500, 2577,
											2000, 3631, 2471, -2700, -3631, 2471, 1300, 2100, 3000,</div>
									</td>
									<td class="text-align-center">741</td>
									<td class="text-align-center">
										<div class="sparkline display-inline"
											data-sparkline-type='pie'
											data-sparkline-piecolor='["#E979BB", "#57889C"]'
											data-sparkline-offset="90" data-sparkline-piesize="23px">
											34,66</div>
										<div
											class="btn-group display-inline pull-right text-align-left hidden-tablet">
											<button class="btn btn-xs btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="fa fa-cog fa-lg"></i>
											</button>
											<ul class="dropdown-menu dropdown-menu-xs pull-right">
												<li><a href="javascript:void(0);"> <i
														class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i> <u>P</u>DF
												</a></li>
												<li><a href="javascript:void(0);"> <i
														class="fa fa-times fa-lg fa-fw txt-color-red"></i> <u>D</u>elete
												</a></li>
												<li class="divider"></li>

												<li class="text-align-center"><a
													href="javascript:void(0);" class="" id="">取消</a></li>
											</ul>
										</div>
									</td>
								</tr>
								<tr>
									<td><a href="javascript:void(0);">土耳其</a></td>
									<td>1,476</td>
									<td class="text-align-center">
										<div class="sparkline txt-color-blue text-align-center"
											data-sparkline-height="22px" data-sparkline-width="90px"
											data-sparkline-barwidth="2">1300, 1877, 2500, 2577,
											2000, 2100, 3000, -2471, -2700, -3631, -2471, 2700, 3631</div>
									</td>
									<td class="text-align-center">123</td>
									<td class="text-align-center">
										<div class="sparkline display-inline"
											data-sparkline-type='pie'
											data-sparkline-piecolor='["#E979BB", "#57889C"]'
											data-sparkline-offset="90" data-sparkline-piesize="23px">
											75,25</div>
										<div
											class="btn-group display-inline pull-right text-align-left hidden-tablet">
											<button class="btn btn-xs btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="fa fa-cog fa-lg"></i>
											</button>
											<ul class="dropdown-menu dropdown-menu-xs pull-right">
												<li><a href="javascript:void(0);"> <i
														class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i> <u>P</u>DF
												</a></li>
												<li><a href="javascript:void(0);"> <i
														class="fa fa-lg fa-fw txt-color-red"></i> <u>D</u>elete
												</a></li>
												<li class="divider"></li>

												<li class="text-align-center"><a
													href="javascript:void(0);" class="" id="">取消</a></li>
											</ul>
										</div>
									</td>
								</tr>
								<tr>
									<td><a href="javascript:void(0);">加拿大</a></td>
									<td>146</td>
									<td class="text-align-center">
										<div class="sparkline txt-color-orange text-align-center"
											data-sparkline-height="22px" data-sparkline-width="90px"
											data-sparkline-barwidth="2">5, 34, 10, 1, 4, 6, -9, -1,
											0, 0, 5, 6, 7</div>
									</td>
									<td class="text-align-center">23</td>
									<td class="text-align-center">
										<div class="sparkline display-inline"
											data-sparkline-type='pie'
											data-sparkline-piecolor='["#E979BB", "#57889C"]'
											data-sparkline-offset="90" data-sparkline-piesize="23px">
											50,50</div>
										<div
											class="btn-group display-inline pull-right text-align-left hidden-tablet">
											<button class="btn btn-xs btn-default dropdown-toggle"
												data-toggle="dropdown">
												<i class="fa fa-cog fa-lg"></i>
											</button>
											<ul class="dropdown-menu dropdown-menu-xs pull-right">
												<li><a href="javascript:void(0);"> <i
														class="fa fa-file fa-lg fa-fw txt-color-greenLight"></i> <u>P</u>DF
												</a></li>
												<li><a href="javascript:void(0);"> <i
														class="fa fa-times fa-lg fa-fw txt-color-red"></i> <u>D</u>elete
												</a></li>
												<li class="divider"></li>

												<li class="text-align-center"><a
													href="javascript:void(0);" class="" id="">取消</a></li>
											</ul>
										</div>
									</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<td colspan=5>
										<ul class="pagination pagination-xs no-margin">
											<li class="prev disabled"><a href="javascript:void(0);"
												class="" id="">上一页</a></li>
											<li class="active"><a href="javascript:void(0);"
												class="" id="">1</a></li>
											<li class=""><a href="javascript:void(0);" class=""
												id="">2</a></li>
											<li class=""><a href="javascript:void(0);" class=""
												id="">3</a></li>
											<li class="next"><a href="javascript:void(0);" class=""
												id="">下一页</a></li>
										</ul>
									</td>
								</tr>
							</tfoot>
						</table>

					</div>
					<!-- end widgetContent -->

				</div>
				<!-- end jarvisWidgetBody -->

			</div>
			<!-- end widget -->
			<!-- end jarvisWidget -->

			
			<!-- end widget -->
			<!-- end jarvisWidget -->

		</article>
		<!-- end widgetGridCol -->

	</div>
	<!-- end widgetGridRow -->

</section>
<!-- end widgetGrid -->



<script type="text/javascript">
	/* DO NOT REMOVE : GLOBAL FUNCTIONS!
	 *
	 * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
	 *
	 * // activate tooltips
	 * $("[rel=tooltip]").tooltip();
	 *
	 * // activate popovers
	 * $("[rel=popover]").popover();
	 *
	 * // activate popovers with hover states
	 * $("[rel=popover-hover]").popover({ trigger: "hover" });
	 *
	 * // activate inline charts
	 * runAllCharts();
	 *
	 * // setup widgets
	 * setup_widgets_desktop();
	 *
	 * // run form elements
	 * runAllForms();
	 *
	 ********************************
	 *
	 * pageSetUp() is needed whenever you load a page.
	 * It initializes and checks for all basic elements of the page
	 * and makes rendering easier.
	 *
	 */

	pageSetUp();
	
	/*
	 * PAGE RELATED SCRIPTS
	 */

	// pagefunction
	
	var pagefunction = function() {
			
		$(".js-status-update a").click(function () {
		    var selText = $(this).text();
		    var $this = $(this);
		    $this.parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
		    $this.parents('.dropdown-menu').find('li').removeClass('active');
		    $this.parent().addClass('active');
		});
		
		/*
		 * TODO: add a way to add more todo's to list
		 */
		
		// initialize sortable
		
	    $("#sortable1, #sortable2").sortable({
	        handle: '.handle',
	        connectWith: ".todo",
	        update: countTasks
	    }).disableSelection();
		
		
		// check and uncheck
		$('.todo .checkbox > input[type="checkbox"]').click(function () {
		    var $this = $(this).parent().parent().parent();
		
		    if ($(this).prop('checked')) {
		        $this.addClass("complete");
		
		        // remove this if you want to undo a check list once checked
		        //$(this).attr("disabled", true);
		        $(this).parent().hide();
		
		        // once clicked - add class, copy to memory then remove and add to sortable3
		        $this.slideUp(500, function () {
		            $this.clone().prependTo("#sortable3").effect("highlight", {}, 800);
		            $this.remove();
		            countTasks();
		        });
		    } else {
		        // insert undo code here...
		    }
		
		})
		// count tasks
		function countTasks() {
		
		    $('.todo-group-title').each(function () {
		        var $this = $(this);
		        $this.find(".num-of-tasks").text($this.next().find("li").size());
		    });
		
		}
		
		/*
		 * RUN PAGE GRAPHS
		 */
		
		// Load FLOAT dependencies (related to page)
		loadScript("js/plugin/flot/jquery.flot.cust.min.js", loadFlotResize);
		
		function loadFlotResize() {
		    loadScript("js/plugin/flot/jquery.flot.resize.min.js", loadFlotToolTip);
		}
		
		function loadFlotToolTip() {
		    loadScript("js/plugin/flot/jquery.flot.tooltip.min.js", generatePageGraphs);
		}
		
		//图表
		function generatePageGraphs() {
		
		    /* TAB 1: UPDATING CHART */
		    // For the demo we use generated data, but normally it would be coming from the server
		
		    var data = [],
		        totalPoints = 100,
		        $UpdatingChartColors = $("#updating-chart").css('color');
		
		    function getRandomData() {

		            data = data.slice(1);
		
			        // do a random walk
			        while (data.length < totalPoints) {
			           /* var prev = data.length > 0 ? data[data.length - 1] : 50;
			            var y = prev + Math.random() * 10 - 5;
			            if (y < 0)
			                y = 0;
			            if (y > 100)
			                y = 100;*/
			            var y = 0;
			            data.push(y);
			        }
			
			        // zip the generated y values with the x values
			        var res = [];
			        for (var i = 0; i < data.length; ++i)
			            res.push([i, data[i]])
			        return res;
		    }
		
		    // setup control widget
		    var updateInterval = 1500;
		    $("#updating-chart").val(updateInterval).change(function () {
		
		        var v = $(this).val();
		        if (v && !isNaN(+v)) {
		            updateInterval = +v;
		            $(this).val("" + updateInterval);
		        }
		
		    });
		
		    // setup plot
		    var options = {
		        yaxis: {
		            min: 0,
		            max: 2046
		        },
		        xaxis: {
		            min: 0,
		            max: 100
		        },
		        colors: [$UpdatingChartColors],
		        series: {
		            lines: {
		                lineWidth: 1,
		                fill: true,
		                fillColor: {
		                    colors: [{
		                        opacity: 0.4
		                    }, {
		                        opacity: 0
		                    }]
		                },
		                steps: false
		
		            }
		        }
		    };
		
		    var plot = $.plot($("#updating-chart"), [getRandomData()], options);
		
		    /* live switch */
		    $('input[type="checkbox"]#start_interval').click(function () {
		        if ($(this).prop('checked')) {
		            $on = true;
		            updateInterval = 1500;
		            update();
		        } else {
		            clearInterval(updateInterval);
		            $on = false;
		        }
		    });
		
		    function update() {
		        if ($on == true) {
		        	$.when($.post(ESB_PATH+"/manger/status/get")).done(function(dd){
		        		data = data.slice(1);
		        		var resultx = JSON.parse(dd);
		        		data.push(resultx.data.queueSize);
		        		$('#queueSize').text(resultx.data.queueSize + '/2046');
		        		var res = [];
				        for (var i = 0; i < data.length; ++i){
				            res.push([i, data[i]])
				        }
				        plot.setData([res]);
			            plot.draw();
			            setTimeout(update, updateInterval);
		        	});
		        } else {
		            clearInterval(updateInterval)
		        }
		
		    }
		
		    var $on = false;
		
		    /*end updating chart*/
		
		    /* TAB 2: Social Network  */
		
		    $(function () {
		        // jQuery Flot Chart
		        var twitter = [
		            [1, 27],
		            [2, 34],
		            [3, 51],
		            [4, 48],
		            [5, 55],
		            [6, 65],
		            [7, 61],
		            [8, 70],
		            [9, 65],
		            [10, 75],
		            [11, 57],
		            [12, 59],
		            [13, 62]
		        ],
		            facebook = [
		                [1, 25],
		                [2, 31],
		                [3, 45],
		                [4, 37],
		                [5, 38],
		                [6, 40],
		                [7, 47],
		                [8, 55],
		                [9, 43],
		                [10, 50],
		                [11, 47],
		                [12, 39],
		                [13, 47]
		            ],
		            data = [{
		                label: "Twitter",
		                data: twitter,
		                lines: {
		                    show: true,
		                    lineWidth: 1,
		                    fill: true,
		                    fillColor: {
		                        colors: [{
		                            opacity: 0.1
		                        }, {
		                            opacity: 0.13
		                        }]
		                    }
		                },
		                points: {
		                    show: true
		                }
		            }, {
		                label: "Facebook",
		                data: facebook,
		                lines: {
		                    show: true,
		                    lineWidth: 1,
		                    fill: true,
		                    fillColor: {
		                        colors: [{
		                            opacity: 0.1
		                        }, {
		                            opacity: 0.13
		                        }]
		                    }
		                },
		                points: {
		                    show: true
		                }
		            }];
		
		        var options = {
		            grid: {
		                hoverable: true
		            },
		            colors: ["#568A89", "#3276B1"],
		            tooltip: true,
		            tooltipOpts: {
		                //content : "Value <b>$x</b> Value <span>$y</span>",
		                defaultTheme: false
		            },
		            xaxis: {
		                ticks: [
		                    [1, "JAN"],
		                    [2, "FEB"],
		                    [3, "MAR"],
		                    [4, "APR"],
		                    [5, "MAY"],
		                    [6, "JUN"],
		                    [7, "JUL"],
		                    [8, "AUG"],
		                    [9, "SEP"],
		                    [10, "OCT"],
		                    [11, "NOV"],
		                    [12, "DEC"],
		                    [13, "JAN+1"]
		                ]
		            },
		            yaxes: {
		
		            }
		        };
		
		        var plot3 = $.plot($("#statsChart"), data, options);
		    });
		
		    // END TAB 2
		
		    // TAB THREE GRAPH //
		    /* TAB 3: Revenew  */
		
		    $(function () {
		
		        var trgt = [
		            [1354586000000, 153],
		            [1364587000000, 658],
		            [1374588000000, 198],
		            [1384589000000, 663],
		            [1394590000000, 801],
		            [1404591000000, 1080],
		            [1414592000000, 353],
		            [1424593000000, 749],
		            [1434594000000, 523],
		            [1444595000000, 258],
		            [1454596000000, 688],
		            [1464597000000, 364]
		        ],
		            prft = [
		                [1354586000000, 53],
		                [1364587000000, 65],
		                [1374588000000, 98],
		                [1384589000000, 83],
		                [1394590000000, 980],
		                [1404591000000, 808],
		                [1414592000000, 720],
		                [1424593000000, 674],
		                [1434594000000, 23],
		                [1444595000000, 79],
		                [1454596000000, 88],
		                [1464597000000, 36]
		            ],
		            sgnups = [
		                [1354586000000, 647],
		                [1364587000000, 435],
		                [1374588000000, 784],
		                [1384589000000, 346],
		                [1394590000000, 487],
		                [1404591000000, 463],
		                [1414592000000, 479],
		                [1424593000000, 236],
		                [1434594000000, 843],
		                [1444595000000, 657],
		                [1454596000000, 241],
		                [1464597000000, 341]
		            ],
		            toggles = $("#rev-toggles"),
		            target = $("#flotcontainer");
		
		        var data = [{
		            label: "Target Profit",
		            data: trgt,
		            bars: {
		                show: true,
		                align: "center",
		                barWidth: 30 * 30 * 60 * 1000 * 80
		            }
		        }, {
		            label: "Actual Profit",
		            data: prft,
		            color: '#3276B1',
		            lines: {
		                show: true,
		                lineWidth: 3
		            },
		            points: {
		                show: true
		            }
		        }, {
		            label: "Actual Signups",
		            data: sgnups,
		            color: '#71843F',
		            lines: {
		                show: true,
		                lineWidth: 1
		            },
		            points: {
		                show: true
		            }
		        }]
		
		        var options = {
		            grid: {
		                hoverable: true
		            },
		            tooltip: true,
		            tooltipOpts: {
		                //content: '%x - %y',
		                //dateFormat: '%b %y',
		                defaultTheme: false
		            },
		            xaxis: {
		                mode: "time"
		            },
		            yaxes: {
		                tickFormatter: function (val, axis) {
		                    return "$" + val;
		                },
		                max: 1200
		            }
		
		        };
		
		        plot2 = null;
		
		        function plotNow() {
		            var d = [];
		            toggles.find(':checkbox').each(function () {
		                if ($(this).is(':checked')) {
		                    d.push(data[$(this).attr("name").substr(4, 1)]);
		                }
		            });
		            if (d.length > 0) {
		                if (plot2) {
		                    plot2.setData(d);
		                    plot2.draw();
		                } else {
		                    plot2 = $.plot(target, d, options);
		                }
		            }
		
		        };
		
		        toggles.find(':checkbox').on('change', function () {
		            plotNow();
		        });
		        plotNow()
		
		    });
		
		}
		
		/*
		 * VECTOR MAP
		 */
		
		data_array = {
		    "US": 4977,
		    "AU": 4873,
		    "IN": 3671,
		    "BR": 2476,
		    "TR": 1476,
		    "CN": 146,
		    "CA": 134,
		    "BD": 100
		};
		
		// Load Map dependency 1 then call for dependency 2
		loadScript("js/plugin/vectormap/jquery-jvectormap-1.2.2.min.js", loadMapFile);
		
		// Load Map dependency 2 then rendeder Map
		function loadMapFile() {
		    loadScript("js/plugin/vectormap/jquery-jvectormap-world-mill-en.js", renderVectorMap);
		}
		
		function renderVectorMap() {
		    $('#vector-map').vectorMap({
		        map: 'world_mill_en',
		        backgroundColor: '#fff',
		        regionStyle: {
		            initial: {
		                fill: '#c4c4c4'
		            },
		            hover: {
		                "fill-opacity": 1
		            }
		        },
		        series: {
		            regions: [{
		                values: data_array,
		                scale: ['#85a8b6', '#4d7686'],
		                normalizeFunction: 'polynomial'
		            }]
		        },
		        onRegionLabelShow: function (e, el, code) {
		            if (typeof data_array[code] == 'undefined') {
		                e.preventDefault();
		            } else {
		                var countrylbl = data_array[code];
		                el.html(el.html() + ': ' + countrylbl + ' visits');
		            }
		        }
		    });
		}
		
		/*
		 * FULL CALENDAR JS
		 */
		
		// Load Calendar dependency then setup calendar
		loadScript("js/plugin/fullcalendar/jquery.fullcalendar.min.js", setupCalendar);
		
		function setupCalendar() {
		
		    if ($("#calendar").length) {
		        var date = new Date();
		        var d = date.getDate();
		        var m = date.getMonth();
		        var y = date.getFullYear();
		
		        var calendar = $('#calendar').fullCalendar({
		
		            editable: true,
		            draggable: true,
		            selectable: false,
		            selectHelper: true,
		            unselectAuto: false,
		            disableResizing: false,
		
		            header: {
		                left: 'title', //,today
		                center: 'prev, next, today',
		                right: 'month, agendaWeek, agenDay' //month, agendaDay,
		            },
		
		            select: function (start, end, allDay) {
		                var title = prompt('Event Title:');
		                if (title) {
		                    calendar.fullCalendar('renderEvent', {
		                            title: title,
		                            start: start,
		                            end: end,
		                            allDay: allDay
		                        }, true // make the event "stick"
		                    );
		                }
		                calendar.fullCalendar('unselect');
		            },
		
		            events: [{
		                title: 'All Day Event',
		                start: new Date(y, m, 1),
		                description: 'long description',
		                className: ["event", "bg-color-greenLight"],
		                icon: 'fa-check'
		            }, {
		                title: 'Long Event',
		                start: new Date(y, m, d - 5),
		                end: new Date(y, m, d - 2),
		                className: ["event", "bg-color-red"],
		                icon: 'fa-lock'
		            }, {
		                id: 999,
		                title: 'Repeating Event',
		                start: new Date(y, m, d - 3, 16, 0),
		                allDay: false,
		                className: ["event", "bg-color-blue"],
		                icon: 'fa-clock-o'
		            }, {
		                id: 999,
		                title: 'Repeating Event',
		                start: new Date(y, m, d + 4, 16, 0),
		                allDay: false,
		                className: ["event", "bg-color-blue"],
		                icon: 'fa-clock-o'
		            }, {
		                title: 'Meeting',
		                start: new Date(y, m, d, 10, 30),
		                allDay: false,
		                className: ["event", "bg-color-darken"]
		            }, {
		                title: 'Lunch',
		                start: new Date(y, m, d, 12, 0),
		                end: new Date(y, m, d, 14, 0),
		                allDay: false,
		                className: ["event", "bg-color-darken"]
		            }, {
		                title: 'Birthday Party',
		                start: new Date(y, m, d + 1, 19, 0),
		                end: new Date(y, m, d + 1, 22, 30),
		                allDay: false,
		                className: ["event", "bg-color-darken"]
		            }, {
		                title: 'Smartadmin Open Day',
		                start: new Date(y, m, 28),
		                end: new Date(y, m, 29),
		                className: ["event", "bg-color-darken"]
		            }],
		
		            eventRender: function (event, element, icon) {
		                if (!event.description == "") {
		                    element.find('.fc-event-title').append("<br/><span class='ultra-light'>" + event.description +
		                        "</span>");
		                }
		                if (!event.icon == "") {
		                    element.find('.fc-event-title').append("<i class='air air-top-right fa " + event.icon +
		                        " '></i>");
		                }
		            }
		        });
		
		    };
		
		    /* hide default buttons */
		    $('.fc-header-right, .fc-header-center').hide();
		
		}
		
		// calendar prev
		$('#calendar-buttons #btn-prev').click(function () {
		    $('.fc-button-prev').click();
		    return false;
		});
		
		// calendar next
		$('#calendar-buttons #btn-next').click(function () {
		    $('.fc-button-next').click();
		    return false;
		});
		
		// calendar today
		$('#calendar-buttons #btn-today').click(function () {
		    $('.fc-button-today').click();
		    return false;
		});
		
		// calendar month
		$('#mt').click(function () {
		    $('#calendar').fullCalendar('changeView', 'month');
		});
		
		// calendar agenda week
		$('#ag').click(function () {
		    $('#calendar').fullCalendar('changeView', 'agendaWeek');
		});
		
		// calendar agenda day
		$('#td').click(function () {
		    $('#calendar').fullCalendar('changeView', 'agendaDay');
		});
	
	};
	
	// end pagefunction
	
	// run pagefunction on load
	pagefunction();
	
	
</script>